<template>

    <div>
        <Tablefilter :filter="filterModel" @search="search" @del="delTable()" @add="addTable()" ></Tablefilter>

        <commonTable :getTableList="getTableList()"
                     :refresh.sync="refresh"
                     :filter="filter"
                     :selectRow.sync="selectRow"
                     :rowClassName="rowClassName"
                     :columns="columns">
        </commonTable>
        <commentEdit ref="commentEdit" :commentForm.sync="commentForm" :refresh.sync="refresh" :editDialog.sync="editDialog"></commentEdit>
    </div>
</template>

<script>

    import Tablefilter from '../components/table/commonTableFilter'
    import commonTable from '../components/table/commonTable'
    import operate from '../components/table/operate'
    import commentEdit from './commentEdit'


    export default {
        name: "commentList",
        components: {
            Tablefilter,
            commentEdit,
            commonTable
        },
        data() {
            let _this = this
            return {
                selectRow: [],
                editData: {},
                filter: {},
                refresh: false,
                columns: [
                    {label: _this.$t('common.operate'), prop: 'operate', render: this.render('operate'), width: 150, tooltip: false},
                    {type: 'selection', width: 55},
                    {label: _this.$t('common.templateId'), prop: 'id', width: 70},
                    {label: _this.$t('common.adId'), prop: 'adId', width: 80},
                    {label: _this.$t('common.commentContent'), prop: 'comment'},
                    {label: _this.$t('common.nickName'), prop: 'commentUser',width:100},
                    {label: _this.$t('common.img'), prop: 'img', render: this.render('img'),width:130,tooltip: false},
                    {label: _this.$t('common.score'), prop: 'score', render: this.render('score'),width:135},
                    {label: _this.$t('common.createTime'), prop: 'addTime',width:100},
                ],
                filterModel: {
                    adId: {
                        label: _this.$t('common.adId'),
                        value: '',
                    },
                    id: {
                        label: _this.$t('common.templateId'),
                        value: '',
                    },
                },
                editDialog: false,
                commentForm:{
                    id:'',
                    adId:'',
                    comment:'',
                    img:'',
                    score:5,
                    commentUser:'',
                },
            }
        },
        methods: {
            search(filter) {
                this.filter = filter
                this.refresh = true
            },
            delTable(Id) {
                let params = Id ? [Id] : this.selectRow.map(v => {
                    return v.id
                })
                this.$commentRemove(params).then(response => {
                    if (response.code === 'success') {
                        this.$message.success(this.$t('common.delSuccess'))
                        this.refresh = true
                        this.selectRow = []
                    } else {
                        this.$message.error(this.$t('common.delError'))
                    }
                })
            },
            addTable(row) {
                this.editDialog = true
                if(row){
                    for(let key in this.commentForm){
                        this.commentForm[key] =row[key]
                    }
                    this.editData = row
                }
                this.$refs.commentEdit.setImages()
            },
            getTableList() {
                return this.$commentList
            },
            render(prop) {
                let render = {}
                if (!prop) return;
                render.operate = (h, params) => {
                    let options = [{
                        style:'',
                        click:[this.addTable,params.row],
                        label:this.$t('common.edit'),
                        type: 'warning',
                    },{
                        style:'',
                        click:[this.delTable,params.row.id],
                        label:this.$t('common.del'),
                        type: 'danger',
                    }]
                    return h(operate,{
                        props:{
                            options:options
                        }
                    })
                }
                render.img = (h, params) => {
                    let imgs = params.row.img?  params.row.img.split(/[,，]/):[]
                    let render = ''
                    imgs.forEach(v=>{
                        if(v && render){
                            render.push(h('img', {
                                attrs: {
                                    src: v
                                },
                                class: {
                                    tableImg: true
                                },
                                style:{
                                    'margin-right':'10px'
                                }
                            }))
                        }else if(v && !render){
                            render = [h('img', {
                                attrs: {
                                    src: v
                                },
                                class: {
                                    tableImg: true
                                },
                                style:{
                                    'margin-right':'10px'
                                }
                            })]
                        }
                    })
                    return h('div',{
                        class: {
                            tableImg: true
                        },
                    },[render])
                }
                render.score = (h, params) => {
                    return h('el-rate',{
                        props:{
                            value:params.row.score,
                            disabled:true
                        }
                    })
                }
                return render[prop]
            },
        },
        mounted() {

        },
        created(){
            // this.getOrdersInfo()
        },
    }
</script>

<style lang="less">
    .tableInfo{
        div{
            padding-right: 20px;
            display: inline-block;
        }
    }
    .error-row{
        background-color: #f56c6c !important;
    }
    .info-row{
        background-color: #409eff !important;
    }
    .success-row{
        background-color: #67c23a !important;
    }
    .striped-row{
        background-color: #FAFAFA !important;
    }
    body .el-table__fixed-right{
        top:0.5px
    }
</style>